<template>
  <div class="about">
    <h1 class="section-title">关于我们</h1>
    
    <div class="join-us">
      <h2 class="section-subtitle">加盟合作</h2>
      <div class="join-content">
        <div class="join-info">
          <h3>成为我们的合作伙伴</h3>
          <p>我们正在全国范围内寻找优质的合作伙伴，共同打造高端汽车服务网络。</p>
          <ul class="benefits">
            <li>品牌授权使用</li>
            <li>专业培训支持</li>
            <li>统一运营标准</li>
            <li>营销资源共享</li>
          </ul>
        </div>
        <div class="join-form">
          <h3>加盟申请</h3>
          <form @submit.prevent="submitJoinForm">
            <div class="form-group">
              <label>姓名</label>
              <input type="text" v-model="joinForm.name" required>
            </div>
            <div class="form-group">
              <label>电话</label>
              <input type="tel" v-model="joinForm.phone" required>
            </div>
            <div class="form-group">
              <label>城市</label>
              <input type="text" v-model="joinForm.city" required>
            </div>
            <div class="form-group">
              <label>投资预算</label>
              <select v-model="joinForm.budget">
                <option value="500-1000">500-1000万</option>
                <option value="1000-2000">1000-2000万</option>
                <option value="2000+">2000万以上</option>
              </select>
            </div>
            <button type="submit" class="submit-btn">提交申请</button>
          </form>
        </div>
      </div>
    </div>
    
    <div class="store-locations">
      <h2 class="section-subtitle">线下门店</h2>
      <div class="map-container">
        <div ref="mapContainer" class="map-container-inner"></div>
        <div class="store-list">
          <div 
            class="store-card" 
            v-for="store in stores" 
            :key="store.id"
            @click="selectStore(store)"
          >
            <h3>{{ store.name }}</h3>
            <p class="address">{{ store.address }}</p>
            <p class="phone">电话: {{ store.phone }}</p>
            <p class="hours">营业时间: {{ store.hours }}</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="contact">
      <h2 class="section-subtitle">联系我们</h2>
      <div class="contact-cards">
        <div class="contact-card">
          <div class="contact-icon">
  <img src="../images/phone-icon.svg" alt="电话">
</div>
          <h3>客服热线</h3>
          <p>400-888-8888</p>
          <p>周一至周日 9:00-21:00</p>
        </div>
        <div class="contact-card">
          <div class="contact-icon">
  <img src="../images/email-icon.svg" alt="邮箱">
</div>
          <h3>电子邮箱</h3>
          <p>service@car4s.com</p>
        </div>
        <div class="contact-card">
          <div class="contact-icon">
  <img src="../images/address-icon.svg" alt="地址">
</div>
          <h3>总部地址</h3>
          <p>北京市朝阳区建国路88号</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const joinForm = ref({
  name: '',
  phone: '',
  city: '',
  budget: '500-1000'
});

const stores = ref([
  {
    id: 1,
    name: '佛山极溯总店',
    address: '佛山市南海区桂城街道南海大道北84号',
    phone: '010-88889999',
    hours: '09:00-18:00',
    location: { lat: 23.0283, lng: 113.1227 }
  },
  {
    id: 2,
    name: '广州极溯分店',
    address: '广州市天河区天河路228号',
    phone: '021-68686868',
    hours: '08:30-19:00',
    location: { lat: 23.1291, lng: 113.2644 }
  },
  {
    id: 3,
    name: '上海第三分店',
    address: '上海市浦东新区张杨路188号',
    phone: '020-38383838',
    hours: '09:00-18:30',
    location: { lat: 31.2304, lng: 121.4737 }
  }
]);

const selectedStore = ref(null);
const map = ref(null);
const mapContainer = ref(null);
const marker = ref(null);

const loadAMapScript = () => {
  return new Promise((resolve) => {
    if (window.AMap) return resolve()
    
    const script = document.createElement('script')
    script.src = `https://webapi.amap.com/maps?v=2.0&key=YOUR_API_KEY`
    script.onload = resolve
    document.head.appendChild(script)
  })
}

const initMap = async () => {
  await loadAMapScript()
  
  map.value = new AMap.Map(mapContainer.value, {
    viewMode: '2D',
    zoom: 11,
    center: [116.397428, 39.90923]
  })
  
  marker.value = new AMap.Marker({
    position: [116.397428, 39.90923],
    map: map.value
  })
}

const destroyMap = () => {
  if (map.value) {
    map.value.destroy()
    map.value = null
  }
}

const selectStore = (store) => {
  selectedStore.value = store;
  if (map.value && marker.value) {
    map.value.setCenter([store.location.lng, store.location.lat]);
    map.value.setZoom(15);
    marker.value.setPosition([store.location.lng, store.location.lat]);
  }
};

const submitJoinForm = () => {
  console.log('加盟申请提交:', joinForm.value);
  alert('感谢您的申请，我们将尽快与您联系！');
  joinForm.value = {
    name: '',
    phone: '',
    city: '',
    budget: '500-1000'
  };
};

onMounted(() => {
  initMap().catch(error => {
    console.error('地图初始化失败:', error)
  })
})

onUnmounted(() => {
  destroyMap()
})
</script>

<style scoped>
.about-container {
  padding: 3rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.content {
  color: #aaa;
  line-height: 1.8;
  font-weight: 300;
  max-width: 800px;
  margin: 0 auto;
}
.about {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 3rem;
  text-align: center;
  color: #c0c0c0;
  font-weight: 250;
  letter-spacing: 0.05em;
}

.section-subtitle {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: #a2a2a2;
  text-align: center;
}

.join-us {
  margin-bottom: 3rem;
}

.join-content {
  display: flex;
  gap: 2rem;
  margin-top: 1.5rem;
}

.join-info {
  flex: 1;
  background-color: #41414157;
  padding: 1.5rem;
  border-radius: 8px;
}

.join-info h3 {
  margin-bottom: 1rem;
  color: #0066cc;
}

.benefits {
  margin-top: 1rem;
  padding-left: 1.5rem;
}

.benefits li {
  margin-bottom: 0.5rem;
}

.join-form {
  max-width: 500px; /* 添加最大宽度 */
  margin: 0 auto; /* 居中显示 */
  flex: 1;
  background-color: #41414157;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


.join-form h3 {
  margin-bottom: 1rem;
  color: #0066cc;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.form-group input,
.form-group select {
  width: 100%;
  max-width: 400px;
  padding: 0.8rem;
  border: 1px solid #41414157;
  border-radius: 4px;
  font-size: 1rem;
  display: block;
}

.submit-btn {
  width: 100%;
  padding: 0.8rem;
  background-color: #0066cc;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.submit-btn:hover {
  background-color: #0052a3;
}

.map-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
  align-items: stretch;
}

.map-container-inner {
  height: 600px;
  width: 700px;
  background: rgba(30, 30, 30, 0.7);
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.store-list {
  height: 700px;
  overflow-y: auto;
}

.store-list {
  flex: 1;
}

.store-card {
  background-color: #41414157;;
  padding: 1rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.store-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.store-card h3 {
  margin-bottom: 0.5rem;
  color: #0066cc;
}

.store-card p {
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  color: #666;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.contact-card {
  background-color: white;
  padding: 1.5rem;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.contact-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  background-color: #f0f7ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.contact-icon img {
  width: 32px;
  height: 32px;
  filter: brightness(0) saturate(100%) invert(39%) sepia(99%) saturate(747%) hue-rotate(176deg) brightness(91%) contrast(96%);
}

.contact-card h3 {
  margin-bottom: 0.5rem;
  color: #0066cc;
}

.contact-card p {
  margin-bottom: 0.5rem;
  color: #666;
}
</style>